import React from 'react'
import styled from 'styled-components'
import { NavLink } from 'react-router-dom'

const Nav: React.FC = () => {
  return (
    <StyledNav>
      <StyledLink exact activeClassName="active" to="/">首頁</StyledLink>
      <StyledLink exact activeClassName="active" to="/bank">銀行</StyledLink>
      <StyledLink exact activeClassName="active" to="/bonds">金庫</StyledLink>
      <StyledLink exact activeClassName="active" to="/boardroom">董事會</StyledLink>
      <StyledLink1 target="_blank" href="https://ht.mdex.com/#/swap">交易所</StyledLink1>
    </StyledNav>
  )
}

const StyledNav = styled.nav`
  align-items: center;
  display: flex;
  @media (max-width: 768px) {
  }
`

const StyledLink = styled(NavLink)`
  color: #0A8AFF;
  font-weight: 700;
  padding-left: ${props => props.theme.spacing[3]}px;
  padding-right: ${props => props.theme.spacing[3]}px;
  text-decoration: none;
  &:hover {
    color: #fff;
  }
  &.active {
    color: #fff;
  }
`


const StyledLink1 = styled.a`
  color: #0A8AFF;
  font-weight: 700;
  padding-left: ${props => props.theme.spacing[3]}px;
  padding-right: ${props => props.theme.spacing[3]}px;
  text-decoration: none;
  &:hover {
    color: #fff;
  }
  &.active {
    color: #fff;
  }
`

export default Nav